<!doctype html>
<meta charset="utf-8">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../css/home.css"/>
	<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
	<script src="../js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="../js/swiper.min.js"></script>
	<script type="text/javascript" src="../layer/layer.js"></script>
	<script type="text/javascript" src="../js/rem.js"></script>
<style>
.outer{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction:column;
    -webkit-box-orient:vertical;
    box-orient:vertical;
    -webkit-flex-direction:column;
    flex-direction:column;
}
.inner{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

/* dropload */
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
.dropload-refresh,.dropload-update,.dropload-load{
	color: #FFFFFF;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 0.50rem;
    font-size: 0.3rem;
    text-align: center;
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0);
}
.dropload-load .loading{
    display: inline-block;
    height: 0.20rem;
    width: 0.20rem;
    border-radius: 50%;
    margin-right: 0.15rem;
    border: 0.08rem solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s 0 linear infinite;
    animation: rotate 0.75s 0 linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

</style>
<script type="text/javascript">
			$(window).load(function() {
				$('#box').delay(200).fadeIn()
			})
		</script>
</head>
<body>
	<!--页面加载 开始-->
		 <!-- <div id="preloader">
		    <div id="status">
		      <p class="center-text"><span>拼命加载中···</span></p>
		    </div>
		  </div>-->
		  <!--页面加载 结束--> 
   <div id="box">
    <header class="header head-top">
        <i class="iconfont my-user">&#xe613;</i>
		<img src="../img/images/title_03.png"/>
		<i class="iconfont more-game">&#xe608;</i>
    </header>
    <section class="inner cont">
	        <div class="cont-top">
				<div class="cont-top-head">
					<div></div>
				    <h2>每日推荐</h2>
				    <div></div>
				</div>
			   <ul class="cont-top-today">
					<!--<li class="cont-top-content">
						<img src="../img/ban.jpg"/>
						<p>VP战队重回世界之巅全程回顾</p>
						<p>by Dotaer | DOTA2 /03'39"</p>
					</li>-->
					<!--<li class="cont-top-content">
						<img src="../img/ban.jpg"/>
						<p>VP战队重回世界之巅全程回顾</p>
						<p>by Dotaer | DOTA2 /03'39"</p>
					</li>
					<li class="cont-top-content">
						<img src="../img/ban.jpg"/>
						<p>VP战队重回世界之巅全程回顾</p>
						<p>by Dotaer | DOTA2 /03'39"</p>
					</li>-->
				</ul>
				<div class="cont-top-more  check-all">
					<p>查看全部今日推荐</p>
					<i class="iconfont xiangyou">&#xe62d;</i>
				</div>
		   </div>
		  <div class="cont-content">
		   	    <div class="cont-content-title">
					<div></div>
				    <h2>关注的屏道</h2>
				    <div></div>
				</div>
			   <div class="cont-content-content">
			   	  <img src="../img/recomment.jpg"/>
			   </div>
				<ul class="cont-content-focus">
					<!--<li class="common-bg">
						<div class="cont-content-head clear">
							<div class="cont-content-backg"></div>
							<div class="cont-douyu">
								<div class="cont-douyu-tv">
									<p>斗鱼TV</p>
						           <i class="iconfont xiangyou">&#xe692;</i>
								</div>
								<p class="total-people">全民直播平台</p>
							</div>
							<div class="cont-content-foot">已关注</div>
						</div>
						<div class="common-bg-style">
							<img src="../img/lol.jpg"/>
							<p>VP战队重回世界之巅全程回顾</p>
							<p>by Dotaer | DOTA2 /03'39"</p>
						</div>
					</li>
					<li class="common-bg">
						<div class="cont-content-head clear">
							<div class="cont-content-backg"></div>
							<div class="cont-douyu">
								<div class="cont-douyu-tv">
									<p>斗鱼TV</p>
						           <i class="iconfont xiangyou">&#xe692;</i>
								</div>
								<p class="total-people">全民直播平台</p>
							</div>
							<div class="cont-content-foot">已关注</div>
						</div>
						<div class="common-bg-style">
							<img src="../img/lol.jpg"/>
							<p>VP战队重回世界之巅全程回顾</p>
							<p>by Dotaer | DOTA2 /03'39"</p>
						</div>
					</li>
				</ul>-->
		   </div>
	  <!--  轮播图-->
	    <div class="choose">
	   	    <h2>选荐</h2>
	   	    <p>根据您的喜好推荐的视频</p>
	   	   <div class="swiper-container choose-swiper">
	        <div class="swiper-wrapper swiper-cont">
	        	<!--
	            <div class="swiper-slide"><img src="../img/ban.jpg"/></div>
	            <div class="swiper-slide"><img src="../img/ban.jpg"/></div>
	            <div class="swiper-slide"><img src="../img/ban.jpg"/></div>
	            <div class="swiper-slide"><img src="../img/ban.jpg"/></div>-->
	        </div>
	        <!-- 如果需要分页器 -->
                 <div class="swiper-pagination"></div>
	      </div>
	      <!--<div class="choose-foot">
	      	<img src="../img/images/circle_07.jpg"/>
	      </div>-->
	    </div>
	    <div class="cont-foot">
	   	  <div class="cont-top-head">
				<div></div>
			    <h2>游戏分类</h2>
			    <div></div>
		    </div>
		    <ul class="cont-foot-game">
		    	<!--<li>
		    		<div class="common-style-pic">
						<img src="../img/logo.jpg"/>
						<p>CSGO</p>
					</div>
		    	</li>
		    	<li>
		    		<div class="common-style-pic">
						<img src="../img/logo.jpg"/>
						<p>CSGO</p>
					</div>
		    	</li>
		    	<li>
		    		<div class="common-style-pic">
					<img src="../img/logo.jpg"/>
					<p>CSGO</p>
				</div>
		    	</li>-->
		    </ul>
			<div class="cont-foot-more">
				<p>COMING SOON</p>
				<p>更多游戏敬请期待</p>
			</div>
	   </div>
    </section>
   </div>
<!--<script type="text/javascript" src="js/jquery-2.0.3.js">
	
</script>-->
<script type="text/javascript" src="../js/home.js"></script>
<script src="../js/dropload.min.js"></script>
<script>
       $('.check-all').on('click',function(){
			window.location.href="toda.html"
		})
		$('.my-user').on('click',function(){
			window.location.href="total.html"
		})
	   $('.more-game').on('click',function(){
			window.location.href="moregame.html"
		})
	    $('.wonderful-more').on('click',function(){
			window.location.href="wonderfultv.html"
		})
	  //轮播图
	  var mySwiper = new Swiper ('.choose-swiper', {
		    loop: true,
		    observer:true,
			observeParents:true,
			autoplayDisableOnInteraction : false,
			// 如果需要分页器
          pagination: '.swiper-pagination'
		  }) 
// dropload

var dropload = $('.inner').dropload({
    domUp : {
        domClass   : 'dropload-up',
        domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
        domUpdate  : '<div class="dropload-update">↑释放更新</div>',
        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
    },
    domDown : {
        domClass   : 'dropload-down',
        domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
        domUpdate  : '<div class="dropload-update">↓释放加载</div>',
        domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
    },
    loadUpFn : function(me){
    	setTimeout(function(){
    		me.resetload();
    	},500)
    	 
        /*$.ajax({
            type: 'GET',
            url: 'http://datainfo.duapp.com/shopdata/getGoods.php',
            dataType: 'jsonp',
            success: function(data){
            	console.log(data)
                var result = '';
                for(var i = 0; i < data.length; i++){
                    result +=   '<div class="add-img">'
                                    +'<img src="'+data[i].goodsListImg+'" alt="">'
                                +'</div>';
                }
                // 为了测试，延迟1秒加载
                setTimeout(function(){
                   
                    $('.cont-top').prepend(result);
                   
                },1000);
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });*/
    }
    /*loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'http://datainfo.duapp.com/shopdata/getclass.php',
            dataType: 'json',
            success: function(data){
                var result = '';
                for(var i = 0; i < data.length; i++){
                    result +=   '<a class="item opacity">'
                                    +'<img src="'+data[i].goodsListImg+'" alt="">'
                                +'</a>';
                }
                // 为了测试，延迟1秒加载
                setTimeout(function(){
                    $('.lists').append(result);
                    me.resetload();
                },1000);
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }*/
});
</script>
</body>
</html>